<template>
  <el-dialog
    :visible.sync="visible"
    title="搜索客户"
    :before-close="handleClose"
    width="60%">
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item label="客户代码">
        <el-input v-model="queryParams.account_code" placeholder="客户代码"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="queryParams.account_name" placeholder="客户名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
        <el-button size="mini" @click="reast">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTable"
      highlight-current-row
      :data="products"
      border
      height="300"
      style="width: 100%"
      v-loading="loading"
      @current-change="handleCurrentChange">
      <el-table-column
        prop="serial_number"
        label="序列号">
      </el-table-column>
      <el-table-column
        prop="account_code"
        label="客户代码">
      </el-table-column>
      <el-table-column
        prop="account_name"
        label="客户名称">
      </el-table-column>
      <el-table-column
        prop="account_key"
        label="客户简称">
      </el-table-column>
      <el-table-column
        prop="relation_name"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="relation_phone"
        label="联系电话">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="handleSearch"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { providerList } from '@/api/basics'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    onConfirm: {
      type: Function,
      required: true
    },
    diaclose: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      products: [],
      loading: false,
      queryParams: {
        account_code: '',
        account_name1: '',
        limit: 10,
        page: 1
      },
      total: 0,
      currentRow: null
    }
  },
  methods: {
    handleSearch() {
      this.loading = true
      providerList(this.queryParams).then(response => {
        this.products = response.data
        this.total = response.count
        this.loading = false
      })
    },
    reast() {
      this.queryParams = {
        account_code: '',
        account_name1: '',
        limit: 10,
        page: 1
      }
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    handleClose() {
      this.diaclose()
    },
    handleConfirm() {
      if(this.currentRow){
        this.onConfirm(this.currentRow)
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
